<template>
  <div class="login-container" >
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="rules"
      class="login-form"
      autocomplete="on"
      label-position="left"
    >
      <div class="title-container">
        <h3 class="title">找回密码</h3>
        <el-steps style="width:480px" :active="1" finish-status="success">
          <el-step title="验证信息"></el-step>
          <el-step title="修改密码"></el-step>
          <el-step title="找回成功"></el-step>
        </el-steps>
      </div>
      <el-form-item prop="username" style="margin-top:30px">
      
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="用户名"
          name="username"
          type="text"
          tabindex="1"
        />
      </el-form-item>
      <el-form-item prop="email">
        <span class="svg-container">
          <svg-icon icon-class="email" />
        </span>
        <el-input 
          ref="email"
          v-model="loginForm.email"
          placeholder="邮箱"
          name="email"
          type="text"
          tabindex="1" 
        />
        
          </el-form-item>
          <div>
          <el-form-item prop="code" style="width:250px;float:left">
        <span class="svg-container">
          <svg-icon icon-class="email" />
        </span>
        <el-input
          ref="code"
          v-model="loginForm.code"
          placeholder="验证码"
          name="code"
          type="text"
          tabindex="1" 
        />
        
          </el-form-item>
          <el-button style="float:left;margin-top:10px;margin-left:10px"
          :disabled="!show"
          
          round
          @click="getCode"
        >发送验证码</el-button>
            <span v-show="!show" class="count" style="color:#fff;float:left;margin-top:18px;margin-left:10px">{{ count }} s</span>
          </div>
      <el-button
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click="handleRegist"
      >下一步
      </el-button>
    </el-form>
  </div>
</template>

<script>
// eslint-disable-next-line 
/* eslint-disable */
import Cookies from 'js-cookie'
import { sendMail, getOneUserPassword } from '../../api/user'
export default {
  name: 'Regist',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value || value.length === 0) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
   

    const validateEmail = (rule, value, callback) => {
      const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
      if (value == '' || value == undefined || value == null) {
        callback(new Error('请输入邮箱地址'))
      } else {
        if (!reg.test(value)) {
          callback(new Error('请输入正确的邮箱地址'))
        } else {
          callback()
        }
  }
    }
    
    return {
      loginForm: {
        username: '',
        email:'',
        code:''
        //error: '',
      },
      sendMail:{
        code:'',
        email:'',
        username:''
      },
      code:'',
      password1: '',
      show: true,
        count:'',
        timer: null,
      rules: {
        username: [{ required: true, trigger: 'change', validator: validateUsername },],
        email: [{ required: true, trigger: 'change', validator: validateEmail }],
        //code: [{ required: true, trigger: 'change', validator: validateCode }],
      },
      passwordType: 'password',
      passwordType1: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {}
    }
  },
  mounted() {
    
    this.changeCode()
  },
  methods: {
    //获取验证码
        /* getCaptchaKey() {
           let captchaKey = Math.random()
             .toString(10)
             .substring(2);
           return captchaKey;
         }, */
     getCaptchaKey() {
      let code = "";
      const codeLength = 4; //验证码的长度  
      const random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
      'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数  
      for(let i = 0; i < codeLength; i++) { //循环操作  
        let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）  
        code += random[index]; //根据索引取得随机数加到code上  
      }
      //this.checkCode = code; //把code值赋给验证码  
      return code;
      //console.log(this.checkCode)
    },
     changeCode() {
       let captcha_key = this.getCaptchaKey();
      this.code = captcha_key;
      //console.log(this.code)
       /* this.$refs.code.setAttribute(
         "src",
         process.env.VUE_APP_API_URL +
          "auth/get_captcha?captcha_key=" +
             captcha_key
           ); */
         },
    //倒计时
    getCode(){
      if (this.loginForm.email!=''&&this.loginForm.username!='') {
     const TIME_COUNT = 60;
     if (!this.timer) {
       this.count = TIME_COUNT;
       this.show = false;
       this.timer = setInterval(() => {
       if (this.count > 0 && this.count <= TIME_COUNT) {
         this.count--;
        } else {
         this.show = true;
         clearInterval(this.timer);
         this.timer = null;
        }
       }, 1000)
      }
      //发送邮件
      this.sendMail.code=this.code
      this.sendMail.email=this.loginForm.email
      this.sendMail.username=this.loginForm.username
      //console.log(sendMail)
      sendMail(this.sendMail).then(response => {
        this.$message({ message:"邮件发送成功，验证码5分钟内有效", type: 'success' })
        //this.setDefault()
      }).catch(() => {
        //this.loading = false
      })
      }else{
        this.$message({ message:"请输入用户名和邮箱", type: 'error' })
        this.loading = false
      }
      
   },
    handleRegist() {
          //this.loading = true
          //console.log(this.loginForm.username)
          const onSuccess = (response) => {
          const { msg } = response
          this.$notify({
            title: '操作成功',
            message: msg,
            type: 'success',
            duration: 2000
          })
          this.loading = false
          }
      if (!this.loading) {
        this.loading = true
        
        //this.postForm.enroll_img=JSON.stringify(this.fileList_enroll)
        //console.log(this.fileList_enroll)
        this.$refs.loginForm.validate((valid, fields) => {
          //console.log(valid, fields)
          if (valid) {
            //this.loginForm.role="user"
            if(this.loginForm.code==""){
              this.$message({ message:"验证码不能为空", type: 'error' })
              this.loading = false
            }else if(this.loginForm.code!=this.code){
                this.$message({ message:"验证码错误", type: 'error' })
              this.loading = false
            }else{
              const user = Object.assign({}, this.loginForm)
            Cookies.set('passwordUsername',this.loginForm.username)
            //console.log(enroll)
              getOneUserPassword(user).then(response => {
                onSuccess(response)
                this.$router.push(`/retrievePWD2`)
                //this.setDefault()
              }).catch(() => {
                this.loading = false
              })
            }
          } else {
            const message = fields[Object.keys(fields)[0]][0].message
            this.$message({ message, type: 'error' })
            this.loading = false
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #d2cfda;
  $light_gray: #fff;
  $cursor: #fff;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
  }
</style>

<style lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;

  .login-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    .login-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }

    .thirdparty-button {
      position: absolute;
      right: 0;
      bottom: 6px;
    }

    @media only screen and (max-width: 470px) {
      .thirdparty-button {
        display: none;
      }
    }
  }
</style>
